<template>
  <!-- 我发起的 -->
  <div ref="contentRef" class="content">
    <!-- 筛选 -->
    <div class="top-tool">
      <!-- 时间&状态 -->
      <div class="tool-left">
        <!-- <a-range-picker v-model:value="dateValue">
          <template #suffixIcon>
            <svg-icon icon-class="icon_select_date" class-name="icon-select-date"></svg-icon>
          </template>
        </a-range-picker> -->
        <DatePicker
          ref="datePicker"
          @changeBeginTime="changeBeginTime"
          @changeEndTime="changeEndTime"
        ></DatePicker>
        <!-- <DatePicker></DatePicker> -->
        <a-select
          v-model:value="stateValue"
          style="width: 160px; border-radius: 4px"
          placeholder="请选择状态"
        >
          <template #suffixIcon>
            <svg-icon icon-class="icon_select_down" class-name="icon-select-down"></svg-icon>
          </template>
          <a-select-option v-for="(item, i) in stateArr" :key="i" :value="item.value">{{
            item.text
          }}</a-select-option>
        </a-select>
      </div>
      <!-- 搜索&重置 -->
      <div class="tool-right">
        <a-input-group compact>
          <a-select v-model:value="searchTitle">
            <template #suffixIcon>
              <svg-icon icon-class="icon_select_down" class-name="icon-select-down"></svg-icon>
            </template>
            <a-select-option v-for="(item, i) in searchTitleArr" :key="i" :value="item.value">{{
              item.text
            }}</a-select-option>
          </a-select>
          <a-input
            v-model:value="keyword"
            style="width: 228px; height: 36px; border-radius: 0 4px 4px 0; margin-right: 8px"
            placeholder="请输入关键字查询"
          >
            <template #prefix>
              <svg-icon icon-class="icon_search" class-name="icon-search"></svg-icon>
            </template>
          </a-input>
        </a-input-group>
        <a-button type="primary" @click="searchBtnClick">搜索</a-button>
        <a-button @click="resetBtnClick">重置</a-button>
      </div>
    </div>
    <!-- 表格  -->
    <div class="table-bg">
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        loading="false"
        :pagination="false"
        table-layout="fixed"
      >
        <template #bodyCell="{ column, text, record }">
          <a-tooltip
            v-if="column.dataIndex !== 'operation'"
            :get-popup-container="() => contentRef"
            placement="top"
            :title="
              column.dataIndex === 'nodeName'
                ? text?.length > 4
                  ? text
                  : ''
                : column.dataIndex === 'documentTitle'
                ? text?.length > 19
                  ? text
                  : ''
                : column.dataIndex === 'documentNum'
                ? text?.length > 13
                  ? text
                  : ''
                : column.dataIndex === 'createUserName'
                ? text?.length > 4
                  ? text
                  : ''
                : column.dataIndex === 'handler'
                ? text?.length > 8
                  ? text
                  : ''
                : ''
            "
          >
            <div>
              <span v-if="column.dataIndex === 'processStatus'" class="state-bg">
                <svg-icon
                  :icon-class="stateIcons[parseInt(text ? text : '')]"
                  class-name="icon-state"
                />
                <span class="state-text">{{ stateTexts[parseInt(text ? text : '')] }}</span>
              </span>
              <span v-else>{{ text ? text : '--' }}</span>
            </div>
          </a-tooltip>
          <div v-else class="editable-row-operations">
            <span>
              <a class="operation-normal" @click="edit(record)">详情</a>
            </span>
          </div>
        </template>
      </a-table>
      <!-- 分页器 -->
      <div v-show="dataSource.length > 0 && total > 10" class="pagination-bar">
        <div class="pagination-box">
          <a-pagination
            :current="currentPage"
            :page-size="pageSize"
            :total="total"
            :show-total="total => `共${total}条`"
            :show-size-changer="true"
            @change="onPageChange"
          />
          <div class="change-page-bg">
            <span>前往</span>
            <input
              class="change-page-input"
              type="text"
              @keyup="changePageKeyUp"
              @blur="changePageBlur"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, onUpdated } from 'vue';
import { Interface } from '@/api/create/create.js';
import { message } from 'ant-design-vue';
import { changeData } from '@/utils/validate.js';
import DatePicker from '@/components/datePicker/index.vue';
import store from '../../../store';
import { useRouter } from 'vue-router';
const props = defineProps({
  categroyVal: {
    type: Number,
    default: 0
  }
});

// ------------- 筛选 -------------
const beginTime = ref('');
const endTime = ref('');
const datePicker = ref(null);
function changeBeginTime(newBeginTime) {
  // console.log('接收到数据newBeginTime：', newBeginTime);
  beginTime.value = newBeginTime;
}
function changeEndTime(newEndTime) {
  // console.log('接收到数据newEndTime：', newEndTime);
  endTime.value = newEndTime;
}
// 0办理中 1已办结 2已撤销 3已驳回 4已归档 5已废弃 6已拒绝
const stateValue = ref();
const stateArr = ref([
  { value: 'all', text: '全部' },
  { value: '0', text: '办理中' },
  { value: '1', text: '已办结' },
  { value: '2', text: '已撤销' },
  // { value: '3', text: '已驳回' },
  { value: '4', text: '已归档' },
  { value: '5', text: '已废弃' },
  { value: '6', text: '已拒绝' }
]);
const searchTitle = ref('title');
const searchTitleArr = ref([
  { value: 'title', text: '标题' },
  { value: 'number', text: '文号' },
  { value: 'handler', text: '处理人' }
]);
const keyword = ref('');
// 我登记的搜索
function searchBtnClick() {
  currentPage.value = 1;
  getMyDocumentList();
}
function resetBtnClick() {
  currentPage.value = 1;
  datePicker.value.resetTimes();
  beginTime.value = '';
  endTime.value = '';
  stateValue.value = null;
  searchTitle.value = 'title';
  keyword.value = '';
  getMyDocumentList();
}
const contentRef = ref(null);

// --------- table -------------
const columns = ref([
  {
    title: '标题',
    dataIndex: 'documentTitle',
    width: '310px'
  },
  {
    title: '文号',
    dataIndex: 'documentNum',
    width: '205px'
  },
  {
    title: props.categroyVal === 0 ? '拟稿人' : '登记人',
    dataIndex: 'createUserName',
    width: '98px'
  },
  {
    title: props.categroyVal === 0 ? '拟稿日期' : '登记日期',
    dataIndex: props.categroyVal === 0 ? 'receivedDate' : 'createTime',
    width: '120px'
  },
  {
    title: '状态',
    dataIndex: 'processStatus',
    width: '86px'
  },
  {
    title: '当前节点',
    dataIndex: 'nodeName',
    width: '100px'
  },
  {
    title: '处理人',
    dataIndex: 'handler',
    width: '165px'
  },
  {
    title: '操作',
    dataIndex: 'operation'
  }
]);
// 0办理中 1已办结 2已撤销 3已驳回 4已归档 5已废弃 6已拒绝
const stateIcons = ref([
  'form_icon_banlizhong',
  'form_icon_yibanjie',
  'form_icon_yichexiao',
  'form_icon_yibohui',
  'form_icon_yibanjie',
  'form_icon_yichexiao',
  'form_icon_yibohui'
]);
const stateTexts = ref(['办理中', '已办结', '已撤销', '已驳回', '已归档', '已废弃', '已拒绝']);

const router = useRouter();
function edit(key) {
  sessionStorage.removeItem('startingActive');
  // console.log('editClick:', key);
  router.push({
    name: 'examinePage',
    query: {
      processInstanceId: key.processInstanceId,
      documentTitle: key.documentTitle,
      type: 'my'
    }
  });
}

// ------------- 数据 & 分页器 -------------
const dataSource = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
function changePageKeyUp(event) {
  if (event.key === 'Enter') {
    event.target.blur();
  }
}
function changePageBlur(event) {
  if (/[0-9]/.test(event.target.value)) {
    // 3we5 => 35
    event.target.value = event.target.value.replace(/[^0-9]/g, '');
    currentPage.value = parseInt(event.target.value);
    let maxPage = parseInt(total.value / pageSize.value + 1);
    maxPage = maxPage > 0 ? maxPage : 1;
    if (currentPage.value > maxPage) {
      currentPage.value = maxPage;
    }
    getMyDocumentList();
    // 切换页数
  } else {
    event.target.value = '';
  }
}
function onPageChange(page, size) {
  // console.log(page, size);
  currentPage.value = page;
  pageSize.value = size;
  getMyDocumentList();
}
const isLoading = ref(false);
function getMyDocumentList() {
  isLoading.value = true;
  let params = {
    current: currentPage.value,
    size: pageSize.value,
    data: {}
  };
  // console.log(
  //   'date:',
  //   beginTime.value,
  //   endTime.value,
  //   'processStatus:',
  //   stateValue.value,
  //   'documentTitle:',
  //   keyword.value
  // );

  if (stateValue.value && stateValue.value.length > 0 && stateValue.value !== 'all') {
    params.data.processStatus = stateValue.value;
  }
  if (keyword.value.length > 0) {
    if (searchTitle.value === 'title') {
      params.data.documentTitle = keyword.value;
    } else if (searchTitle.value === 'number') {
      params.data.documentNum = keyword.value;
    } else if (searchTitle.value === 'handler') {
      params.data.handler = keyword.value;
    }
  }
  if (beginTime.value.length > 0) {
    params.data.beginTime = changeData(beginTime.value);
  }
  if (endTime.value.length > 0) {
    params.data.endTime = changeData(endTime.value);
  }

  // console.log('params', params);
  // 目前只有收文，不做区分
  Interface.GetMyDocumentList(params)
    .then(res => {
      // console.log('GetMyDocumentList', res);
      if (res.code === 200) {
        dataSource.value = res.data.records;
        dataSource.value.forEach(element => {
          element.createTime = changeData(element.createTime / 1000);
        });
        total.value = res.data.total;
      } else {
        message.error(res.msg);
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
}

onMounted(() => {
  getMyDocumentList();
});
onUpdated(() => {});
let color = ref(store.state.user.setPrimaryColor);
</script>
<style lang="less" scoped>
@import './index.less';
.operation-normal {
  color: v-bind('color') !important;
}
</style>
